// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import VueResource from "vue-resource"

Vue.use(VueResource)

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

// 注册vuex
import vuex from "vuex"
Vue.use(vuex)

//每次刚进入 网站 ，肯定会  调用 main.js 在刚调用的时候，先从本地存储中，把 购物车的数据读出来，放到 store 
var car = JSON.parse(localStorage.getItem('car') || '[]') 

var store = new vuex.Store({
  state:{ // this.$store.state.***
    car:car // 将购物车 中的商品的数据，用一个数据存储起来， 在 car 数组中,存储一些商品的对象  咱们可以暂时 将这个商品对象
          // 设计成这个样子   { id : 商品的id , count:要购买的数量 , price: 商品的单价 , selected:false} 
  },
  mutations:{ // this.$store.commit('方法名')
    addToCar(state,goodsinfo){
      // 点击加入购物车 把商品信息 保存到  state 中的  car 中
      //分析
      // 1. 如果购物车之前就有这个对应的商品了  那么，只需要 更新数量
      // 2. 如果没有，则直接把 商品的数据  push 到car即可  some 找到停止
      // 假设 在购物车中， 没有找到对应的商品
      var flag = false
      state.car.some(item => {
          if(item.id == goodsinfo.id){
            item.count += parseInt(goodsinfo.count)
            flag = true
            return true
          }
      });
        // 如果 最终   循环完毕  得到的 flag  还是false  则把商品数据直接 push 到购物车中 
      if(!flag){
        state.car.push(goodsinfo)

      }
      // 当更新的 car  之后  把car数组，储存到 本地的  localStorage 中
      localStorage.setItem('car', JSON.stringify(state.car))
    },
    // 修改购物车中商品的数量值
    updataGoodsinfo(state,goodsinfo){
      // 分析 1. 
      state.car.some(item=>{
        if(item.id == goodsinfo.id){
          item.count = parseInt(goodsinfo.count)
          return
        }
      })
      // 当修改完商品数量，把最新的购物车数据，保存到本地
      localStorage.setItem('car', JSON.stringify(state.car))
    },
    removeFormCar(state, id){
      // 根据id 从store 中的购物车中删除对应的那条 
      state.car.some((item,i)=>{
        if(item.id == id){
            state.car.splice(i,1)
            return true
        }
      })
      // 删除完毕之后的，最新的 购物车数据， 同步到本地存储中
      localStorage.setItem('car', JSON.stringify(state.car))
    },
    // 
    updatagoodsSelected(state,info){
      state.car.some(item=>{
        if(item.id == info.id){
          item.selected = info.selected;
        }
      })
      // 把最新的 所有的购物车商品的状态保存到  store 中去
      localStorage.setItem('car', JSON.stringify(state.car))
    }
  },
  getters:{ // this.$store.getters。***
    getAllCount(state){
      var c = 0;
      state.car.forEach(item => {
        c += item.count
      });
      return c
    },
    getGoodsCount(state){
      var o = {}
      state.car.forEach(item=>{
        o[item.id] = item.count
      })
      return o
    },
    // 
    getgoodsSelected(state){
      var o = {}
      state.car.forEach(item=>{
        o[item.id] = item.selected
      })
      return o
    },
    getgoodsCountAndAmount(state){
      var o = {
        count:0, // 勾选的数量
        amount:0 // 勾选的总价
      }
      state.car.forEach(item=>{
        if(item.selected){
          o.count += item.count,
          o.amount += item.price * item.count
        }
      })
      return o
    }
  }
})

// 设置请求的根路径
Vue.http.options.root = 'http://www.liulongbin.top:3005';
// 全局设置 post application/x-www-form-urlencoded
Vue.http.options.emulateJSON = true; 

// 时间过滤器
import moment from "moment"
Vue.filter('dataFormat',function(dataStr,pattern = "YYYY-MM-DD HH:mm:ss"){
  return moment(dataStr).format(pattern);
})

// mint-ui
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

// Mui
import './lib/mui/css/mui.min.css'

// vue-preview  缩略tu
import VuePreview from 'vue-preview'
Vue.use(VuePreview)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  store:store // 挂载store
})
